<html>

<head>
	<!-- This is an HTML comment -->
	<!-- Below we are grabbing three.js and some helper stuff for using the camera -->
	<script>window.onerror = function (error, url, line) { parent.postMessage(["console", "❌ -- [ERROR] -- ❌ -- ⚠️ " + error], "*") }; var cl = console.log; console.log = function () { var msg = [...arguments].join(); parent.postMessage(["console", msg], "*"); }</script>
	<script>window.onerror = function (error, url, line) { parent.postMessage(["console", "❌ -- [ERROR] -- ❌ -- ⚠️ " + error], "*") }; var cl = console.log; console.log = function () { var msg = [...arguments].join(); parent.postMessage(["console", msg], "*"); }
	</script>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js">
	</script>
	<!-- <script language="javascript" type="text/javascript">

		// This set of controls performs orbiting, dollying (zooming), and panning. It maintains
		// the "up" direction as +Y, unlike the TrackballControls. Touch on tablet and phones is
		// supported.
		//
		//    Orbit - left mouse / touch: one finger move
		//    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
		//    Pan - right mouse, or arrow keys / touch: three finter swipe
		//
		// This is a drop-in replacement for (most) TrackballControls used in examples.
		// That is, include this js file and wherever you see:
		//    	controls = new THREE.TrackballControls( camera );
		//      controls.target.z = 150;
		// Simple substitute "OrbitControls" and the control should work as-is.

		THREE.OrbitControls = function (object, domElement, localElement) {

			this.object = object;
			this.domElement = (domElement !== undefined) ? domElement : document;
			this.localElement = (localElement !== undefined) ? localElement : document;

			// API

			// Set to false to disable this control
			this.enabled = true;

			// "target" sets the location of focus, where the control orbits around
			// and where it pans with respect to.
			this.target = new THREE.Vector3();
			// center is old, deprecated; use "target" instead
			this.center = this.target;

			// This option actually enables dollying in and out; left as "zoom" for
			// backwards compatibility
			this.noZoom = false;
			this.zoomSpeed = 1.0;
			// Limits to how far you can dolly in and out
			this.minDistance = 0;
			this.maxDistance = Infinity;

			// Set to true to disable this control
			this.noRotate = false;
			this.rotateSpeed = 1.0;

			// Set to true to disable this control
			this.noPan = false;
			this.keyPanSpeed = 7.0;	// pixels moved per arrow key push

			// Set to true to automatically rotate around the target
			this.autoRotate = false;
			this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60

			// How far you can orbit vertically, upper and lower limits.
			// Range is 0 to Math.PI radians.
			this.minPolarAngle = 0; // radians
			this.maxPolarAngle = Math.PI; // radians

			// Set to true to disable use of the keys
			this.noKeys = false;
			// The four arrow keys
			this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };

			////////////
			// internals

			var scope = this;

			var EPS = 0.000001;

			var rotateStart = new THREE.Vector2();
			var rotateEnd = new THREE.Vector2();
			var rotateDelta = new THREE.Vector2();

			var panStart = new THREE.Vector2();
			var panEnd = new THREE.Vector2();
			var panDelta = new THREE.Vector2();

			var dollyStart = new THREE.Vector2();
			var dollyEnd = new THREE.Vector2();
			var dollyDelta = new THREE.Vector2();

			var phiDelta = 0;
			var thetaDelta = 0;
			var scale = 1;
			var pan = new THREE.Vector3();

			var lastPosition = new THREE.Vector3();

			var STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
			var state = STATE.NONE;

			// events

			var changeEvent = { type: 'change' };


			this.rotateLeft = function (angle) {

				if (angle === undefined) {

					angle = getAutoRotationAngle();

				}

				thetaDelta -= angle;

			};

			this.rotateUp = function (angle) {

				if (angle === undefined) {

					angle = getAutoRotationAngle();

				}

				phiDelta -= angle;

			};

			// pass in distance in world space to move left
			this.panLeft = function (distance) {

				var panOffset = new THREE.Vector3();
				var te = this.object.matrix.elements;
				// get X column of matrix
				panOffset.set(te[0], te[1], te[2]);
				panOffset.multiplyScalar(-distance);

				pan.add(panOffset);

			};

			// pass in distance in world space to move up
			this.panUp = function (distance) {

				var panOffset = new THREE.Vector3();
				var te = this.object.matrix.elements;
				// get Y column of matrix
				panOffset.set(te[4], te[5], te[6]);
				panOffset.multiplyScalar(distance);

				pan.add(panOffset);
			};

			// main entry point; pass in Vector2 of change desired in pixel space,
			// right and down are positive
			this.pan = function (delta) {

				var element = scope.domElement === document ? scope.domElement.body : scope.domElement;

				if (scope.object.fov !== undefined) {

					// perspective
					var position = scope.object.position;
					var offset = position.clone().sub(scope.target);
					var targetDistance = offset.length();

					// half of the fov is center to top of screen
					targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0);
					// we actually don't use screenWidth, since perspective camera is fixed to screen height
					scope.panLeft(2 * delta.x * targetDistance / element.clientHeight);
					scope.panUp(2 * delta.y * targetDistance / element.clientHeight);

				} else if (scope.object.top !== undefined) {

					// orthographic
					scope.panLeft(delta.x * (scope.object.right - scope.object.left) / element.clientWidth);
					scope.panUp(delta.y * (scope.object.top - scope.object.bottom) / element.clientHeight);

				} else {

					// camera neither orthographic or perspective - warn user
					console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');
					parent.postMessage(["console", JSON.stringify('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.')], "*");

				}

			};

			this.dollyIn = function (dollyScale) {

				if (dollyScale === undefined) {

					dollyScale = getZoomScale();

				}

				scale /= dollyScale;

			};

			this.dollyOut = function (dollyScale) {

				if (dollyScale === undefined) {

					dollyScale = getZoomScale();

				}

				scale *= dollyScale;

			};

			this.update = function () {

				var position = this.object.position;
				var offset = position.clone().sub(this.target);

				// angle from z-axis around y-axis

				var theta = Math.atan2(offset.x, offset.z);

				// angle from y-axis

				var phi = Math.atan2(Math.sqrt(offset.x * offset.x + offset.z * offset.z), offset.y);

				if (this.autoRotate) {

					this.rotateLeft(getAutoRotationAngle());

				}

				theta += thetaDelta;
				phi += phiDelta;

				// restrict phi to be between desired limits
				phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, phi));

				// restrict phi to be betwee EPS and PI-EPS
				phi = Math.max(EPS, Math.min(Math.PI - EPS, phi));

				var radius = offset.length() * scale;

				// restrict radius to be between desired limits
				radius = Math.max(this.minDistance, Math.min(this.maxDistance, radius));

				// move target to panned location
				this.target.add(pan);

				offset.x = radius * Math.sin(phi) * Math.sin(theta);
				offset.y = radius * Math.cos(phi);
				offset.z = radius * Math.sin(phi) * Math.cos(theta);

				position.copy(this.target).add(offset);

				this.object.lookAt(this.target);

				thetaDelta = 0;
				phiDelta = 0;
				scale = 1;
				pan.set(0, 0, 0);

				if (lastPosition.distanceTo(this.object.position) > 0) {

					this.dispatchEvent(changeEvent);

					lastPosition.copy(this.object.position);

				}

			};


			function getAutoRotationAngle() {

				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;

			}

			function getZoomScale() {

				return Math.pow(0.95, scope.zoomSpeed);

			}

			function onMouseDown(event) {

				if (scope.enabled === false) { return; }
				event.preventDefault();

				if (event.button === 0) {
					if (scope.noRotate === true) { return; }

					state = STATE.ROTATE;

					rotateStart.set(event.clientX, event.clientY);

				} else if (event.button === 1) {
					if (scope.noZoom === true) { return; }

					state = STATE.DOLLY;

					dollyStart.set(event.clientX, event.clientY);

				} else if (event.button === 2) {
					if (scope.noPan === true) { return; }

					state = STATE.PAN;

					panStart.set(event.clientX, event.clientY);

				}

				// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
				scope.domElement.addEventListener('mousemove', onMouseMove, false);
				scope.domElement.addEventListener('mouseup', onMouseUp, false);

			}

			function onMouseMove(event) {

				if (scope.enabled === false) return;

				event.preventDefault();

				var element = scope.domElement === document ? scope.domElement.body : scope.domElement;

				if (state === STATE.ROTATE) {

					if (scope.noRotate === true) return;

					rotateEnd.set(event.clientX, event.clientY);
					rotateDelta.subVectors(rotateEnd, rotateStart);

					// rotating across whole screen goes 360 degrees around
					scope.rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
					// rotating up and down along whole screen attempts to go 360, but limited to 180
					scope.rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);

					rotateStart.copy(rotateEnd);

				} else if (state === STATE.DOLLY) {

					if (scope.noZoom === true) return;

					dollyEnd.set(event.clientX, event.clientY);
					dollyDelta.subVectors(dollyEnd, dollyStart);

					if (dollyDelta.y > 0) {

						scope.dollyIn();

					} else {

						scope.dollyOut();

					}

					dollyStart.copy(dollyEnd);

				} else if (state === STATE.PAN) {

					if (scope.noPan === true) return;

					panEnd.set(event.clientX, event.clientY);
					panDelta.subVectors(panEnd, panStart);

					scope.pan(panDelta);

					panStart.copy(panEnd);

				}

				// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
				scope.update();

			}

			function onMouseUp( /* event */) {

				if (scope.enabled === false) return;

				// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
				scope.domElement.removeEventListener('mousemove', onMouseMove, false);
				scope.domElement.removeEventListener('mouseup', onMouseUp, false);

				state = STATE.NONE;

			}

			function onMouseWheel(event) {

				if (scope.enabled === false || scope.noZoom === true) return;

				var delta = 0;

				if (event.wheelDelta) { // WebKit / Opera / Explorer 9

					delta = event.wheelDelta;

				} else if (event.detail) { // Firefox

					delta = - event.detail;

				}

				if (delta > 0) {

					scope.dollyOut();

				} else {

					scope.dollyIn();

				}

			}

			function onKeyDown(event) {

				if (scope.enabled === false) { return; }
				if (scope.noKeys === true) { return; }
				if (scope.noPan === true) { return; }

				// pan a pixel - I guess for precise positioning?
				// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
				var needUpdate = false;

				switch (event.keyCode) {

					case scope.keys.UP:
						scope.pan(new THREE.Vector2(0, scope.keyPanSpeed));
						needUpdate = true;
						break;
					case scope.keys.BOTTOM:
						scope.pan(new THREE.Vector2(0, -scope.keyPanSpeed));
						needUpdate = true;
						break;
					case scope.keys.LEFT:
						scope.pan(new THREE.Vector2(scope.keyPanSpeed, 0));
						needUpdate = true;
						break;
					case scope.keys.RIGHT:
						scope.pan(new THREE.Vector2(-scope.keyPanSpeed, 0));
						needUpdate = true;
						break;
				}

				// Greggman fix: https://github.com/greggman/three.js/commit/fde9f9917d6d8381f06bf22cdff766029d1761be
				if (needUpdate) {

					scope.update();

				}

			}

			function touchstart(event) {

				if (scope.enabled === false) { return; }

				switch (event.touches.length) {

					case 1:	// one-fingered touch: rotate
						if (scope.noRotate === true) { return; }

						state = STATE.TOUCH_ROTATE;

						rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
						break;

					case 2:	// two-fingered touch: dolly
						if (scope.noZoom === true) { return; }

						state = STATE.TOUCH_DOLLY;

						var dx = event.touches[0].pageX - event.touches[1].pageX;
						var dy = event.touches[0].pageY - event.touches[1].pageY;
						var distance = Math.sqrt(dx * dx + dy * dy);
						dollyStart.set(0, distance);
						break;

					case 3: // three-fingered touch: pan
						if (scope.noPan === true) { return; }

						state = STATE.TOUCH_PAN;

						panStart.set(event.touches[0].pageX, event.touches[0].pageY);
						break;

					default:
						state = STATE.NONE;

				}
			}

			function touchmove(event) {

				if (scope.enabled === false) { return; }

				event.preventDefault();
				event.stopPropagation();

				var element = scope.domElement === document ? scope.domElement.body : scope.domElement;

				switch (event.touches.length) {

					case 1: // one-fingered touch: rotate
						if (scope.noRotate === true) { return; }
						if (state !== STATE.TOUCH_ROTATE) { return; }

						rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
						rotateDelta.subVectors(rotateEnd, rotateStart);

						// rotating across whole screen goes 360 degrees around
						scope.rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
						// rotating up and down along whole screen attempts to go 360, but limited to 180
						scope.rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);

						rotateStart.copy(rotateEnd);
						break;

					case 2: // two-fingered touch: dolly
						if (scope.noZoom === true) { return; }
						if (state !== STATE.TOUCH_DOLLY) { return; }

						var dx = event.touches[0].pageX - event.touches[1].pageX;
						var dy = event.touches[0].pageY - event.touches[1].pageY;
						var distance = Math.sqrt(dx * dx + dy * dy);

						dollyEnd.set(0, distance);
						dollyDelta.subVectors(dollyEnd, dollyStart);

						if (dollyDelta.y > 0) {

							scope.dollyOut();

						} else {

							scope.dollyIn();

						}

						dollyStart.copy(dollyEnd);
						break;

					case 3: // three-fingered touch: pan
						if (scope.noPan === true) { return; }
						if (state !== STATE.TOUCH_PAN) { return; }

						panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
						panDelta.subVectors(panEnd, panStart);

						scope.pan(panDelta);

						panStart.copy(panEnd);
						break;

					default:
						state = STATE.NONE;

				}

			}

			function touchend( /* event */) {

				if (scope.enabled === false) { return; }

				state = STATE.NONE;
			}

			this.domElement.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false);
			this.localElement.addEventListener('mousedown', onMouseDown, false);
			this.domElement.addEventListener('mousewheel', onMouseWheel, false);
			this.domElement.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox

			this.domElement.addEventListener('keydown', onKeyDown, false);

			this.localElement.addEventListener('touchstart', touchstart, false);
			this.domElement.addEventListener('touchend', touchend, false);
			this.domElement.addEventListener('touchmove', touchmove, false);

		};

		THREE.OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
	</script> -->

	<script src="./OrbitControls.js"></script>

	<meta charset="utf-8">
	<style>
		body {
			margin: 0px;
			background-color: #000000;
			overflow: hidden;

		}
	</style>
</head>

<body>
	<script>

		// First we need to set up some objects and initialise them.
		// Three.js provides a canvas automatically so we don't need that. 
		// This creates a camera. It has a field of view, a size, a near clipping plane and a far clipping plane      
		var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
		// We need to create a scene and add things to it.   
		var scene = new THREE.Scene();
		// Now we are goint to create some built in geometry 
		// It's a box.    
		var geometry = new THREE.BoxGeometry(-100, -100, -100);
		// We are going to want to texture the box.
		// To do this we need a texture loader object to load the texture 
		var myTextureLoader = new THREE.TextureLoader();
		// Then we can load the texture into a variable
		var myTexture = myTextureLoader.load('Day.png');
		// Now we need to create a material
		// This defines how the surface of the object reflects light
		// We're using Phong. There are lots of other types.      
		var material = new THREE.MeshBasicMaterial({ map: myTexture });


		// We can now create a mesh using the geomentry and the material
		var mesh = new THREE.Mesh(geometry, material);



		var geometry2 = new THREE.BoxGeometry(100, 1, 100);
		// We are going to want to texture the box.
		// To do this we need a texture loader object to load the texture 
		var myTextureLoader2 = new THREE.TextureLoader();
		// Then we can load the texture into a variable
		var myTexture2 = myTextureLoader.load('earth.jpg');
		// Now we need to create a material
		// This defines how the surface of the object reflects light
		// We're using Phong. There are lots of other types.      
		var material2 = new THREE.MeshBasicMaterial({ map: myTexture2 });
		// We can now create a mesh using the geomentry and the material
		var mesh2 = new THREE.Mesh(geometry2, material2);
		mesh2.position.set(0, -20, 0);



		var geometry3 = new THREE.DodecahedronGeometry(8, 0);
		// We are going to want to texture the box.
		// To do this we need a texture loader object to load the texture 
		var myTextureLoader3 = new THREE.TextureLoader();
		// Then we can load the texture into a variable
		var myTexture3 = myTextureLoader.load('sun.jpg');
		// Now we need to create a material
		// This defines how the surface of the object reflects light
		// We're using Phong. There are lots of other types.      
		var material3 = new THREE.MeshBasicMaterial({ map: myTexture3 });
		// We can now create a mesh using the geomentry and the material
		var mesh3 = new THREE.Mesh(geometry3, material3);
		mesh3.position.set(10, 25, -20);

		var geo4 = new THREE.CylinderGeometry(3, 5, 40, 10, 10, false, 0, Math.PI * 2);
		var myTextureLoader4 = new THREE.TextureLoader();
		// Then we can load the texture into a variable
		var myTexture4 = myTextureLoader.load('white.jpg');
		// Now we need to create a material
		// This defines how the surface of the object reflects light
		// We're using Phong. There are lots of other types.      
		var material4 = new THREE.MeshBasicMaterial({ map: myTexture4 });
		// We can now create a mesh using the geomentry and the material
		var mesh4 = new THREE.Mesh(geo4, material4);
		mesh4.position.set(0, 0, 0);

		var geo5 = new THREE.BoxGeometry(20, 20, 20);
		var myTextureLoader5 = new THREE.TextureLoader();
		// Then we can load the texture into a variable
		var myTexture5 = myTextureLoader.load('white.jpg');
		// Now we need to create a material
		// This defines how the surface of the object reflects light
		// We're using Phong. There are lots of other types.      
		var material5 = new THREE.MeshBasicMaterial({ map: myTexture5 });
		// We can now create a mesh using the geomentry and the material
		var mesh5 = new THREE.Mesh(geo5, material5);
		mesh5.position.set(0, 50, 0);



		// If we want to see stuff, we will need a light.
		// The argument is the colour of the light in hexadecimal.      
		var light = new THREE.DirectionalLight("rgb(255,255,255)");
		// Now we can create our renderer. Thiis renders the scene.      
		var renderer = new THREE.WebGLRenderer();

		// Now we can set some variables for the objects.
		camera.position.z = 80;
		// Notice we can also us the set method to position things.
		//light.position.z = 2;
		light.position.set(0, 60, 80);
		// Now we add the mesh and the light to the scene.
		scene.add(mesh);
		scene.add(mesh2);
		scene.add(mesh3);
		scene.add(mesh4);
		scene.add(mesh5);
		scene.add(light);







		// This is to make sure that the scene understands the resolution of the device we are on.
		renderer.setPixelRatio(window.devicePixelRatio);
		// We can also set the size of the render window
		renderer.setSize(window.innerWidth, window.innerHeight);
		// Finally we want to connect the renderer to the HTML document
		document.body.appendChild(renderer.domElement);
		// And make sure that when the page is resized, everything gets updated 
		window.addEventListener('resize', onWindowResize, false);
		var controls = new THREE.OrbitControls(camera, renderer.domElement);

		//  Now we can have a draw loop.    
		function draw() {
			if (flag) {
				mesh3.rotation.x += 0.005;
			} else {
				mesh3.rotation.x -= 0.005;
			}

			//	mesh.rotation.y += 0.01;
			//camera.position.x += 0.01;
			controls.update();
			renderer.render(scene, camera);
			requestAnimationFrame(draw);
		}

		// This is the thing that does the resizing    
		function loop() {
			// mesh4.rotation.x += 0.3;
			renderer.render(scene, camera);

			// call the loop function again
			requestAnimationFrame(loop);
		}

		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}
		var flag = false
		let y = 0
		// Finally, call the draw loop.      
		// requestAnimationFrame(draw());
		draw()

		window.mouse2move = e => {
			// console.log(e)
			// if (e.pageY > y) {
			// 	flag = false
			// } else {
			// 	flag = true
			// }
			// y = e.pageY
		}
		document.body.addEventListener("mousemove",e=>{
			console.log(e)
			if (e.pageY > y) {
				flag = false
			} else {
				flag = true
			}
			y = e.pageY
		})


	</script>
</body>

</html>